<template>
  <div>
    <el-card style="margin:5px;height: 70px;">
      <el-form inline="inline">
        <el-form-item label="用户类型">
          <el-input v-model="searchRole.role" @keydown.enter.prevent="loadRole" placeholder="请输入">
          </el-input>
        </el-form-item>
        <el-form-item label="权限等级">
          <el-input v-model="searchRole.grade" @keydown.enter.prevent="loadRole" placeholder="请输入">
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="reset">重置</el-button>
          <el-button type="primary" @click="loadRole">搜索</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card style="margin:5px;">
      <div style="margin: 10px 0px 40px 10px;">
        用户类型列表
        <el-button @click="addRole" type="primary" style="float:right;margin-top: -3px;">新增用户类型</el-button>
      </div>
      <div>
        <el-table :data="roleArr">
          <el-table-column type="index" label="编号" width="80" align="center"></el-table-column>
          <el-table-column prop="role" label="用户类型" align="center"></el-table-column>
          <el-table-column prop="description" label="用户权限说明" align="center"></el-table-column>
          <el-table-column prop="grade" label="权限等级" align="center"></el-table-column>
          <el-table-column label="操作" align="center">
            <template #default="scope">
              <el-button @click="editeRole(scope.row)" link type="primary" size="small">编辑</el-button>
              <el-button @click="delRole(scope.row.id)" link type="primary" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
    <el-dialog :title="dialogTitle" v-model="dialogVisible"
               :close-on-click-modal="false" style="width:800px;padding:40px;">
      <el-form label-position="top" label-width="80px">
        <el-form-item label="用户类型">
          <el-input v-model="role.role" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="用户权限说明">
          <el-input v-model="role.description" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="权限等级">
          <el-input v-model="role.grade" placeholder="请输入"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="handleClose">取消</el-button>
        <el-button @click="saveRole" type="primary">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";

const searchRole=ref({})
const roleArr=ref([])
const dialogTitle=ref("")
const dialogVisible=ref(false)
const reset = () => {
  searchRole.value={}
  loadRole()
}
const loadRole = () => {
  axios.post(BASE_URL+'/v1/role/select',searchRole.value)
      .then((response)=>{
        if (response.data.code==2000){
          roleArr.value=response.data.data
        }else {
          ElMessage.error(response.data.msg)
        }
      })
}
onMounted(()=>loadRole())
const role=ref({})
const addRole = () => {
  dialogTitle.value="新增用户类型"
  dialogVisible.value=true
}
const editeRole = (row) => {
  dialogTitle.value="编辑用户类型"
  dialogVisible.value=true
  loadRole()
  role.value=row
}
const delRole = (id) => {
  if (confirm("确定删除该用户类型吗，删除后相关用户的类型将清空")){
    axios.delete(BASE_URL+'/v1/role/delete/'+id)
        .then((response)=>{
          if (response.data.code==2000){
            ElMessage.success("删除成功")
            loadRole()
          }else {
            ElMessage.error(response.data.msg)
          }
        })
  }
}
const handleClose = () => {
  if (confirm("确认要关闭窗口吗")){
    dialogVisible.value=false
    role.value={}
  }
}
const saveRole = () => {
  if (confirm("确认保存吗")){
    axios.post(BASE_URL+'/v1/role/save',role.value)
        .then((response)=>{
          if (response.data.code==2000){
            ElMessage.success("保存成功")
            loadRole()
            dialogVisible.value=false
            role.value={}
          }else {
            ElMessage.error(response.data.msg)
          }
        })
  }
}
</script>

<style scoped>

</style>